<template>
  <div>
    <PageToolss :show-before="true">
      <template slot="before">
        <el-row :gutter="20" type="flex">
          <el-col :span="3" :offset="0">
            <div class="key_ipt_tit">关键字</div>
          </el-col>
          <el-col :span="10" :offset="0">
            <el-input v-model="keyword" placeholder="根据编号搜索" clearable />
          </el-col>
        </el-row>
      </template>
      <template slot="after">
        <el-button size="default" @click="clear">清除</el-button>
        <el-button
          type="primary"
          size="default"
          @click="serachFn"
        >搜索</el-button>
      </template>
    </PageToolss>
    <el-alert :title="`数据一共${total}条`" type="info" show-icon />
    <el-table :data="list2" border stripe>
      <el-table-column prop="id" label="编号" />
      <el-table-column
        prop="title_class"
        label="题型"
        :formatter="formatterFn"
      />
      <el-table-column prop="c_id" label="题目编码">
        <template slot-scope="{ row }">
          <p
            v-for="(item, index) in row.c_id"
            :key="index"
          >
            <a
              class="bule"
              @click="showFn(item)"
            >
              {{ item }}
            </a>
          </p>
        </template>
      </el-table-column>
      <el-table-column prop="input_time" label="录入时间" />
      <el-table-column prop="count_down" label="答题时间（s）" />
      <el-table-column prop="accuracy_num" label="正确率(%)" />
      <el-table-column prop="name" label="录入人" />
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delFn(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :page-size="queryData.size"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
    />
    <preview ref="pre" />
  </div>
</template>

<script>
import Axios from 'axios'
import preview from '@/views/questions/components/preview.vue'
// import { getRandomsList } from '@/api/randoms'
export default {
  name: 'Randoms',
  components: {
    preview
  },
  data() {
    return {
      keyword: '',
      list: [],
      list2: [],
      total: 0,
      queryData: {
        page: 1,
        pagesize: 10
      }
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 渲染页面
    async  initData() {
      const res = await Axios({
        url: 'http://127.0.0.1:4523/m1/1147721-0-default/titleManagement',
        method: 'POST',
        data: {
          page: 1,
          size: 10
        }
      })
      console.log(res)
      this.list = res.data.data
      this.list2 = res.data.data
      this.total = res.data.total
    },
    // 自定义列数据格式化
    formatterFn(row, column, cellValue, index) {
      if (cellValue === '0') return '简述'
      if (cellValue === '1') return '单选'
      if (cellValue === '2') return '多选'
    },
    delFn(id) {
      const res = this.list.filter(item => item.id !== id)
      this.list = res
      this.initData()
    },
    handleCurrentChange() {
      this.initData()
    },
    // 搜索
    serachFn() {
      const res = this.list.filter(item => item.id.indexOf(this.keyword) !== -1)
      console.log(res)
      this.list2 = res
      this.total = res.length
    },
    // 清除
    clear() {
      this.keyword = ''
      this.initData()
    },
    // 点击弹出预留窗
    showFn(id) {
      console.log(id)
      this.$refs.pre.p_isShow = true
      this.$refs.pre.title_id = id
      // 用$ref传值完成回显
    }
  }
}
</script>

<style lang="scss" scoped>
.key_ipt_tit {
  text-align: right;
  line-height: 36px;
}
.bule {
  color: blue;
}
</style>
